<template>
<!-- 批量任务 -->
<!-- <a-card :border='false'> -->
  <div>
    <div class="head-title">
      <span>{{ head_msg }}</span>
    </div>
    <my-table-screen
      :queryParam="queryParam"
      :queryOptions="queryOptions"
      :queryData="queryData"
      @handleFilter="handleFilter"
    ></my-table-screen>

    <div>
      <my-table
        ref="mytable"
        :tableData="tableData"
        @tableHandleIn="tableHandleIn"
      ></my-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </div>

    <a-modal width="40%" :destroyOnClose="true" v-model="is_modal" title="详情" @ok="() => is_modal =false">
      <show-json :details="details"></show-json>
    </a-modal>
  </div>

<!-- </a-card> -->
</template>

<script>
import { getOceanBatchCreativeList,getOceanBatchCreativeDetails,getOceanSyncList,getOceanSyncDetails } from "@/api/adv/batch";

const adName = { 
  title:'计划名称',forname:['data','ad','name'],align:'center',scopedSlots: {customRender:'cycles'},
  "formatter":function(obj,name){
    return obj.ad.name
  },width:220
}

export default {
  props:{
    tack_details:{
      type:Object,
      require:true
    }
  },
  components:{
    'showJson':() => import('@/components/Json')
  },
  data () {
    return {
      head_msg:'批量创建计划创意',
      is_modal:false,
      details:'',
      // 查询
      queryParam:{  // 初始化数据
        page:1,
        page_size:10,
      },
      total: 0,
      queryData:[
        { id:'account_id',title:'账户ID',type:'input',placeholder:'账户ID' },
        { id:'exec_status',title:'任务状态',type:'select',placeholder:'请选择状态',options:'taskStatus' }
      ],
      queryOptions:{
        taskStatus:this.$global.taskStatus
      },
      // 表格
      tableData:{
        rowSelection:undefined,
        tableDataSource:[],
        tableColumns:[
          // { title:'ID',dataIndex:'id',align:'center',width:80 },
          { title:'账户ID',dataIndex:'account_id',align:'center',width:180 },
          { title:'账户昵称',forname:['ocean_account','name'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj[name]
            },width:200
          },
          { title:'执行状态',dataIndex:'exec_status',align:'center',width:160,scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              let value
              this.$global.taskStatus.forEach(ele => {
                if(ele.value == row.exec_status){ value = ele.label } 
              });
              return value
            },colorEvent:(row)=>{
              if(row.exec_status == 'WAITING'){ return 'color:#ffba00' }
              else if(row.exec_status == 'SUCCESS'){ return 'color:#13ce66' }
              else if(row.exec_status == 'CLOSE'){ return 'color:#1890ff' }
              else if(row.exec_status == 'FAIL'){ return 'color:#ff4949' }
            }
          },
          { 
            title:'计划名称',forname:['data','ad','name'],align:'center',scopedSlots: {customRender:'cycles'},
            "formatter":function(obj,name){
              return obj.ad.name
            },width:220
          },
          { title:'开始执行时间',dataIndex:'start_at',align:'center',width:180 },
          { title:'创建时间',dataIndex:'created_at',align:'center',width:180 },
          { title:'更新时间',dataIndex:'updated_at',align:'center',width:180 },
          {
            title: '操作',align:'center',fixed:'right',width:120,
            scopedSlots: {customRender: 'action'},
            tableBtn:[
              { title:'详情',type:'primary',btnType:'handleDetails',size:'small' },
            ]
          },
        ]
      },
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 初始化数据
    async getList(){
      this.queryParam.task_id = this.tack_details.id
      const res = await getOceanBatchCreativeList(this.queryParam)
      // if( this.tack_details.task_type === 'OCEAN_AD_CREATIVE_CREATE' ){
      //   this.head_msg = '批量创建计划创意'
      //   res = await getOceanBatchCreativeList(this.queryParam)
      // }else if( this.tack_details.task_type === 'OCEAN_SYNC' ) {
      //   this.head_msg = '巨量同步'
      //   res = await getOceanSyncList(this.queryParam)
      // }
      if(res.code === 'SUCCESS'){
        this.tableData.tableDataSource = res.data.list
        this.total = res.data.page_info.total
      }
    },
    // table表内列按钮
    async tableHandleIn(tableFnc,row){
      if( tableFnc === 'handleDetails' ){
        const resOcean = await getOceanBatchCreativeDetails(row.id)
        // if( this.tack_details.task_type === 'OCEAN_AD_CREATIVE_CREATE' ){
        //   resOcean = await getOceanBatchCreativeDetails(row.id)
        // }else if(this.tack_details.task_type === 'OCEAN_SYNC') {
        //   resOcean = await getOceanSyncDetails(row.id)
        // }
        this.details = resOcean.data
        this.is_modal = true
      }
    },
    // 搜索
    handleFilter(){
      this.queryParam.page = 1
      this.getList()
    },
  }
}
</script>

<style lang="less" scoped>
  .head-title{
    width: 100%;
    height: 50px;
    text-align: center;
    span{
      font-size: 20px;
      font-weight: 600;
      .mx-linear_gradient(rgb(43, 211, 21),rgb(155, 28, 206));
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
  }
</style>